<template>
	<view>
		<view class="header">
			<view class="text">
				<text>首页</text>
			</view>
			<view class="input">
				<image class="inputIcon" src="https://z3.ax1x.com/2021/05/07/g1BS9H.png">
				</image>
				<input class="seachInput" type="text" value="" placeholder="搜索相关信息" placeholder-style='#ccccc' />
			</view>
			<view class="Img">
				<image class="messageImg" src="../../static/icon/message.png" mode=""></image>
			</view>
			<view class="Img">
				<image class="addImg" src="../../static/icon/add.png" mode=""></image>
			</view>
		</view>
		<image class="bannerImg" src="../../static/images/banner(3).png" mode=""></image>
		<view class="box"></view>
		<view class="nav">
			<view class="nav-icon" v-for="item in navData" :key="item.id">
				<image :src="item.imageSrc" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="title">
			<view class="titleBox">
				<text style="font-family: PingFang SC; font-weight: 400;">A股</text>
				<text style="margin:0 14rpx;">实时金价</text>
				<text style="color: #F85656;font-family: Lato;font-weight: 400;">373.00</text>
			</view>
			<view class="titleBox" style="text-align: right;">
				<text style="color:#F85656;">-4.92 -1.19%</text>
			</view>
		</view>

		<!-- 首页模块 -->
		<!-- 财富直通车模块 -->
		<view class="column">
			<view class="column-text">
				<text>财富直通车</text>
			</view>
			<view class="columnImg">
				<template v-for="(item,index) in forTureData">
					<view class="bigImg" v-if="index==0" :key="item.id">
						<view class="columnText">
							<text>{{item.title}}</text>
						</view>
						<view class="columnText-item">
							<text>{{item.desc}}</text>
						</view>
						<view class="columnText-items">
							<text style="font-size: 28rpx; color: #FFFFFF;">还可</text>
							<text style="font-size: 32rpx; color: #BE7F22;">{{item.bigText}}！</text>
						</view>
						<view class="dateItem">
							<text>{{item.startToEnd}}</text>
						</view>
						<view class="btn">
							<text>立即参与</text>
							<image src="../../static/icon/Right.png" mode="" style="width: 34rpx;height: 28rpx;"></image>
						</view>
					</view>
					<view class="smImg"
						style="background :url('https://z3.ax1x.com/2021/04/17/chIJcn.png') no-repeat;background-size: cover; "
						v-else
						>
						<view class="smText">
							<view class="sm-item">
								<text>{{item.title}}</text>
							</view>
							<view class="sm-items">
								<text>{{item.desc}}</text>
							</view>
							<view class="smBtn">
								<text>立即参与</text>
								<image src="../../static/icon/Right.png" mode="" style="width: 34rpx;height: 28rpx;">
								</image>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>

		<!-- 贷款服务模块 -->
		<view class="column">
			<view class="column-text">
				<text>贷款服务</text>
			</view>
			<view class="columnBox">
				<view class="boxText">
					<view class="textTitle">
						<view class="RightTitle">
							<text>轻松贷款</text>
						</view>
						<view class="otherTitle">
							<text>最低日利率0.02%</text>
						</view>
						<view class="otherTitle">
							<text>快速提现</text>
						</view>
					</view>
				</view>
				<view class="moneyBox">
					<view class="moneyText">
						<text>200,000,00</text>
					</view>
					<view class="limitBox">
						<text>最高可借额度(元)</text>
					</view>
				</view>
				<view class="limitBtn">
					<text>获取我的额度</text>
				</view>
			</view>
		</view>

		<!-- 王牌热销模块 -->
		<view class="column">
			<view class="column-text">
				<text>王牌理财热销榜</text>
			</view>
			<view class="column-header">
				<view class="header-text active">
					<text>短期精选</text>
				</view>
				<view class="header-text ">
					<text>短期精选</text>
				</view>
				<view class="header-text">
					<text>短期精选</text>
				</view>
				<view class="header-text">
					<text>短期精选</text>
				</view>
				<view class="header-text">
					<text>短期精选</text>
				</view>
			</view>
			<view class="richesBox">
				<view class="richesItem">
					<view class="richesTitle">
						<view class="richesData">
							<text>活期理财</text>
						</view>
						<view class="textS"></view>
						<view class="richesData">
							<text>国金众赢货币</text>
						</view>
						<view class="richesGlod">
							<text>优选货基</text>
						</view>
					</view>
					<view class="richesNum">
						<view class="richesNum-left">
							<view class="percent">
								<text>3.90%</text>
							</view>
							<view class="richesText">
								<text>七日年化收益率</text>
							</view>
						</view>
						<view class="richesNum-right">
							<view class="richesNum-item">
								<text>灵活申赎</text>
							</view>
							<view class="richesText">
								<text>低风险</text>
								<text>｜</text>
								<text>再购买</text>
							</view>
						</view>
					</view>
					<view class="richesBtn">
						<text>去抢购</text>
					</view>
				</view>
				<view class="Hitem"></view>
				<view class="richesItem">
					<view class="richesTitle">
						<view class="richesData">
							<text>活期理财</text>
						</view>
						<view class="textS"></view>
						<view class="richesData">
							<text>国金众赢货币</text>
						</view>
						<view class="richesGlod">
							<text>优选货基</text>
						</view>
					</view>
					<view class="richesNum">
						<view class="richesNum-left">
							<view class="percent">
								<text>3.90%</text>
							</view>
							<view class="richesText">
								<text>七日年化收益率</text>
							</view>
						</view>
						<view class="richesNum-right">
							<view class="richesNum-item">
								<text>灵活申赎</text>
							</view>
							<view class="richesText">
								<text>低风险</text>
								<text>｜</text>
								<text>再购买</text>
							</view>
						</view>
					</view>
					<view class="richesBtn">
						<text>去抢购</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 爆款推荐模块 -->
		<view class="column">
			<view class="column-text">
				<text>爆款推荐</text>
			</view>
			<swiper class="swiper" next-margin="390rpx">
				<swiper-item>
					<view class="swiper-item">
						<view class="columnItem-text">
							<text>天宏永利债券B</text>
						</view>
						<view class="columnItem-num">
							<text>15.05%</text>
						</view>
						<view class="columnUp">
							<text>近一年涨幅</text>
						</view>
						<view class="columnoBule">
							<view class="Bule">
								<text>严控风险</text>
							</view>
							<view class="Bule">
								<text>严控风险</text>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="columnItem-text">
							<text>天宏永利债券B</text>
						</view>
						<view class="columnItem-num">
							<text>15.05%</text>
						</view>
						<view class="columnUp">
							<text>近一年涨幅</text>
						</view>
						<view class="columnoBule">
							<view class="Bule">
								<text>严控风险</text>
							</view>
							<view class="Bule">
								<text>严控风险</text>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="columnItem-text">
							<text>天宏永利债券B</text>
						</view>
						<view class="columnItem-num">
							<text>15.05%</text>
						</view>
						<view class="columnUp">
							<text>近一年涨幅</text>
						</view>
						<view class="columnoBule">
							<view class="Bule">
								<text>严控风险</text>
							</view>
							<view class="Bule">
								<text>严控风险</text>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="columnItem-text">
							<text>天宏永利债券B</text>
						</view>
						<view class="columnItem-num">
							<text>15.05%</text>
						</view>
						<view class="columnUp">
							<text>近一年涨幅</text>
						</view>
						<view class="columnoBule">
							<view class="Bule">
								<text>严控风险</text>
							</view>
							<view class="Bule">
								<text>严控风险</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 理财优选 -->
		<view class="column">
			<view class="column-text">
				<text>理财优选</text>
			</view>
			<view class="favorBox">
				<view class="favorItem">
					<view class="favorLeft">
						<view class="columnItem-num">
							<text>3.90%</text>
						</view>
						<view class="favorText">
							<text>业绩比较基准</text>
						</view>
					</view>
					<view class="favorRight">
						<view class="columnItem-text">
							<text>远见开放19号（TG01190...</text>
						</view>
						<view class="columnoBule">
							<view class="Bule">
								<text>严控风险</text>
							</view>
							<view class="Bule">
								<text>严控风险</text>
							</view>
							<view class="Bule">
								<text>严控风险</text>
							</view>
						</view>
					</view>
				</view>
				<view class="favorH"></view>
				<view class="favorItem">
					<view class="favorLeft">
						<view class="columnItem-num">
							<text>3.90%</text>
						</view>
						<view class="favorText">
							<text>业绩比较基准</text>
						</view>
					</view>
					<view class="favorRight">
						<view class="columnItem-text">
							<text>远见开放19号（TG01190...</text>
						</view>
						<view class="columnoBule">
							<view class="Bule">
								<text>严控风险</text>
							</view>
							<view class="Bule">
								<text>严控风险</text>
							</view>
							<view class="Bule">
								<text>严控风险</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 财富头条 -->
		<view class="column">
			<view class="column-text">
				<text>财富头条</text>
			</view>
			<view class="headline" v-for="item in headLineData" :key="item.id">
				<view class="headline-text">
					<view class="headUser">
						<image src="../../static/images/toutiao2.png" mode="" style="width: 56rpx; height: 56rpx; margin-right: 12rpx;"></image>
						<text>{{item.name}}</text>
					</view>
					<view class="textTitle">
						<text>{{item.mainContents}}</text>
					</view>
					<view class="textWapper">
						<text>这是一个很长的标题长得我都这是一个很长的标题长得我都这是...</text>
					</view>
					<view class="headTime">
						<view class="headTime-text">
							<text>为你推荐·</text>
						</view>
						<view class="headTimeHour">
							<text>12小时前</text>
						</view>
					</view>
				</view>
				<view class="headline-imgage">
					<image src="../../static/images/toutiao.png" mode="" style="width: 200rpx; height: 200rpx;"></image>
				</view>
			</view>
		<!-- 	<view class="headline">
				<view class="headline-text">
					<view class="headUser">
						<image src="../../static/images/toutiao2.png" mode="" style="width: 56rpx; height: 56rpx; margin-right: 12rpx;"></image>
						<text>华兴债券</text>
					</view>
					<view class="textTitle">
						<text>手里有闲钱合理利用能让它价...</text>
					</view>
					<view class="textWapper">
						<text>这是一个很长的标题长得我都这是一个很长的标题长得我都这是...</text>
					</view>
					<view class="headTime">
						<view class="headTime-text">
							<text>为你推荐·</text>
						</view>
						<view class="headTimeHour">
							<text>12小时前</text>
						</view>
					</view>
				</view>
				<view class="headline-imgage">
					<image src="../../static/images/toutiao.png" mode="" style="width: 200rpx; height: 200rpx;"></image>
				</view>
			</view> -->
			<!-- <view class="headline">
				<view class="headline-text">
					<view class="headUser">
						<image src="../../static/images/toutiao2.png" mode="" style="width: 56rpx; height: 56rpx; margin-right: 12rpx;"></image>
						<text>华兴债券</text>
					</view>
					<view class="textTitle">
						<text>手里有闲钱合理利用能让它价...</text>
					</view>
					<view class="textWapper">
						<text>这是一个很长的标题长得我都这是一个很长的标题长得我都这是...</text>
					</view>
					<view class="headTime">
						<view class="headTime-text">
							<text>为你推荐·</text>
						</view>
						<view class="headTimeHour">
							<text>12小时前</text>
						</view>
					</view>
				</view>
				<view class="headline-imgage">
					<image src="../../static/images/toutiao.png" mode="" style="width: 200rpx; height: 200rpx;"></image>
				</view>
			</view>
			<view class="headline">
				<view class="headline-text">
					<view class="headUser">
						<image src="../../static/images/toutiao2.png" mode="" style="width: 56rpx; height: 56rpx; margin-right: 12rpx;"></image>
						<text>华兴债券</text>
					</view>
					<view class="textTitle">
						<text>手里有闲钱合理利用能让它价...</text>
					</view>
					<view class="textWapper">
						<text>这是一个很长的标题长得我都这是一个很长的标题长得我都这是...</text>
					</view>
					<view class="headTime">
						<view class="headTime-text">
							<text>为你推荐·</text>
						</view>
						<view class="headTimeHour">
							<text>12小时前</text>
						</view>
					</view>
				</view>
				<view class="headline-imgage">
					<image src="../../static/images/toutiao.png" mode="" style="width: 200rpx; height: 200rpx;"></image>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {createNamespacedHelpers} from "vuex";
	let {mapActions,mapState}=createNamespacedHelpers("home")
	
	export default {
		data() {
			return {

			}
		},
		computed:{
			...mapState(['navData','forTureData','headLineData'])
		},
		mounted() {
			this.getHomeNav();
			this.getForture();
			this.getHeadsLine()
		},
		methods: {
			...mapActions(['getHomeNav','getForture',"getHeadsLine"])
		}
	}
</script>

<style>

	.header {
		height: 248rpx;
		background-color: #3476F1;
		display: flex;
		padding: 13rpx 0;
		position: relative;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
	}

	.text {
		width: 120rpx;
		height: 64rpx;
		font-size: 42rpx;
		font-weight: 600;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.input {
		width: 500rpx;
		height: 64rpx;
		background-color: #FFFFFF;
		border-radius: 34rpx;
		display: flex;
		align-items: center;
		padding: 0 14rpx;
	}

	.inputIcon {
		height: 32rpx;
		width: 32rpx;
		margin: 0 10rpx;
	}

	.Img {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
	}

	.messageImg {
		width: 48rpx;
		height: 48rpx;
	}

	.addImg {
		width: 48rpx;
		height: 48rpx;
	}

	.bannerImg {
		width: 700rpx;
		height: 240rpx;
		position: absolute;
		top: 120rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.box {
		height: 90rpx;
	}

	.nav {
		width: 700rpx;
		height: 356rpx;
		margin: 0 auto;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.nav-icon {
		width: 110rpx;
		height: 140rpx;
		text-align: center;
		font-size: 24rpx;
		color: #666666;
	}

	.nav-icon>image {
		width: 90rpx;
		height: 90rpx;
	}

	.title {
		width: 700rpx;
		height: 80rpx;
		display: flex;
		margin: 18rpx auto;
		padding: 0 30rpx;
		box-sizing: border-box;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
		font-size: 24rpx;
		color: #666666;
	}

	.titleBox {
		width: 50%;
		line-height: 80rpx;
	}

	.column {
		width: 700rpx;
		margin: 40rpx auto;
	}

	.column-text {
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 44rpx;
		color: #000000;
		opacity: 1;
		border-left: 8rpx solid #3476F1;
		padding-left: 18rpx;
	}

	.columnImg {
		width: 700rpx;
		height: 380rpx;
		align-items: center;
		display: flex;
		flex-flow: column;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 18rpx;
	}

	.bigImg {
		box-sizing: border-box;
		width: 352rpx;
		height: 384rpx;
		padding: 14rpx 22rpx;
		background:url('https://z3.ax1x.com/2021/04/17/chIYXq.png') no-repeat;
		background-size: cover;
	}

	.smImg {
		width: 332rpx;
		height: 186rpx;
	}

	.smImg>image {
		width: 332rpx;
		height: 186rpx;
	}

	.columnText {
		margin-top: 18rpx;
		width: 240rpx;
		height: 56rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 58rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.columnText-item {
		width: 280rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #FFFFFF;
		opacity: 1;
		margin-top: 12rpx;
	}

	.columnText-items {
		width: 280rpx;
		height: 44rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 44rpx;
		opacity: 1;
	}

	.dateItem {
		width: 194rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #FFEED2;
		opacity: 1;
		margin-top: 12rpx;
	}

	.btn {
		width: 180rpx;
		height: 60rpx;
		background: #FF7846;
		opacity: 1;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 60rpx;
		color: #FFFFFF;
		opacity: 1;
		align-items: center;
		justify-content: center;
		display: flex;
		margin-top: 52rpx;
	}

	.smText {
		padding: 22rpx 20rpx;
	}

	.sm-item {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.sm-items {
		width: 202rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #DFEAFF;
		opacity: 0.7;
	}

	.smBtn {
		width: 174rpx;
		height: 48rpx;
		background: #FF7846;
		opacity: 1;
		border-radius: 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
	}

	.columnBox {
		width: 700rpx;
		height: 220rpx;
		background: rgba(52, 118, 241, 0.05);
		box-sizing: border-box;
		box-shadow: 0px 0px 24rpx rgba(85, 85, 85, 0.05);
		border-radius: 12rpx;
		margin-top: 18rpx;
		padding: 24rpx 30rpx;
		position: relative;
	}

	.richesTitle {
		display: flex;
		align-items: center;
	}

	.textTitle {
		display: flex;
	}

	.RightTitle {
		width: 112rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
	}

	.otherTitle {
		width: 192rpx;
		height: 40rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #999999;
		opacity: 1;
		margin-left: 18rpx;
	}

	.moneyBox {
		margin-top: 40rpx;
	}

	.moneyText {
		width: 224rpx;
		height: 54rpx;
		font-size: 44rpx;
		font-family: Lato;
		font-weight: bold;
		line-height: 54rpx;
		color: #F85656;
		opacity: 1;
	}

	.limitBox {
		width: 184rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		opacity: 1;
	}

	.limitBtn {
		width: 210rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #54A8EE 0%, #3476F1 100%);
		opacity: 1;
		border-radius: 4rpx;
		position: absolute;
		right: 30rpx;
		bottom: 34rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 60rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.column-header {
		display: flex;
		margin-top: 18rpx;
		justify-content: space-around;
	}

	.header-text {
		width: 134rpx;
		height: 48rpx;
		font-size: 28rpx;
		opacity: 1;
		border-radius: 8rpx;
		text-align: center;
		line-height: 48rpx;
		color: #999999;
		font-weight: 400;

	}

	.active {
		background: #3476F1;
		color: #FFFFFF;
	}

	.richesBox {
		width: 700rpx;
		height: 420rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 12rpx;
		margin-top: 24rpx;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.richesItem {
		width: 636rpx;
		height: 175rpx;
		position: relative;
	}

	.Hitem {
		width: 630rpx;
		height: 0rpx;
		border: 2rpx solid #000000;
		opacity: 0.03;
		margin-bottom: 26rpx;
	}

	.richesData {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
	}

	.textS {
		width: 0rpx;
		height: 22rpx;
		border: 2rpx solid #000000;
		opacity: 0.05;
		margin: 0 10rpx;
	}

	.richesGlod {
		height: 38rpx;
		background: rgba(190, 127, 34, 0.15);
		border-radius: 4rpx;
		margin-left: 20rpx;
		line-height: 38rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #BE7F22;
	}

	.richesNum {
		display: flex;
		margin-top: 28rpx;
	}

	.percent {
		height: 56rpx;
		font-size: 44rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #F85656;
		opacity: 1;
	}

	.richesText {
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
		color: #868686;
		opacity: 1;
	}

	.richesNum-right {
		margin-left: 30rpx;
	}

	.richesNum-item {
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 44rpx;
		color: #333333;
		margin-bottom: 12rpx;
	}

	.richesBtn {
		width: 174rpx;
		height: 64rpx;
		background: #3476F1;
		border-radius: 4rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 64rpx;
		position: absolute;
		right: 30rpx;
		top: 82rpx;
	}

	.swiper {
		margin-top: 18rpx;
	}

	.swiper-item {
		width: 290rpx;
		height: 260rpx;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		padding: 30rpx 48rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.columnItem-text {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #000000;
		margin-bottom: 14rpx;
	}

	.columnItem-num {
		height: 54rpx;
		font-size: 44rpx;
		font-family: Lato;
		font-weight: bold;
		line-height: 54rpx;
		color: #F85656;
	}

	.columnUp {
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
	}

	.columnoBule {
		display: flex;
		justify-content: space-between;
		margin-top: 12rpx;
	}

	.Bule {
		height: 40rpx;
		background: rgba(52, 118, 241, 0.1);
		border-radius: 4px;
		font-size: 20rpx;
		line-height: 40rpx;
		color: #3476F1;
	}

	.favorBox {
		width: 700rpx;
		height: 296rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		border-radius: 12rpx;
		margin-top: 18rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.favorItem {
		height: 115rpx;
		display: flex;
	}

	.favorText {
		height: 17px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 17px;
		color: #999999;
		opacity: 1;
		margin-top: 12rpx;
	}

	.favorLeft {
		width: 304rpx;
	}

	.favorH {
		width: 642rpx;
		height: 0px;
		border: 2rpx solid #000000;
		opacity: 0.03;
		margin-bottom: 30rpx;
	}
	.headline{
		width: 351px;
		height: 142px;
		background: #FFFFFF;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 6px;
		margin-top: 18rpx;
		padding: 24rpx;
		display: flex;
		justify-content: space-around;
	}
	.headline-text{
		width: 424rpx;
		padding-right: 22rpx;
	}
	.headline-imgage{
		height: 200rpx;
		width: 200rpx;
	}
	.headUser{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		color: #999999;
		margin-bottom: 22rpx;
	}
	.textTitle{
		height: 34rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 34rpx;
		color: #333333;
		margin-bottom: 16rpx;
	}
	.textWapper{
		height: 70rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		margin-bottom: 30rpx;
	}
	.headTime{
		display: flex;
	}
	.headTime-text{
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 34rpx;
		color: #999999;
	}
	.headTimeHour{
		height: 34px;
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 34rpx;
		color: #666666;
	}
</style>
